import React, { Component } from 'react'

export default class App extends Component {

  // 通过匿名函数的方式定义 类属性
  /* handleClick = ()=>{
    console.log(this);// App
    console.log("点击事件触发了");
  } */

  // 在根组件定义了一个监听器，事件是通过冒泡的方式触发的
  // 类函数
  handleClick(){
    console.log(this);// undefined ==》 App
    console.log("点击事件触发了");
  }

  // 在构造函数中重新绑定handleClick的this指向
  constructor(){
    super();
    this.handleClick = this.handleClick.bind(this);
  }

  render() {
    return (
      <div>
        {/* <button onClick={this.handleClick}>点击</button> */}
        
        {/* 方法一：通过bind（this）来修正this指向 */}
        {/* <button onClick={this.handleClick.bind(this)}>点击</button> */}

        {/* 方法二：在构造函数中重新绑定handleClick的this指向 */}
        <button onClick={this.handleClick}>点击</button>
      </div>
    )
  }
}
